<template>
  <view class="custom-header">
    <view class="header-left" @click="handleBack">
      <u-icon name="arrow-left" size="24" color="#ff6b35"></u-icon>
      <text class="back-text">{{ backText }}</text>
    </view>
    <view class="header-center">
      <text class="title">{{ title }}</text>
    </view>
    <view class="header-right" v-if="showMore">
      <u-icon name="more-dot-fill" size="20" color="#999" @click="handleMore"></u-icon>
    </view>
    <view class="header-right" v-if="showMoreOptions" @click="handleMoreOptions">
      {{showMoreOptions}}
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomHeader',
  props: {
    title: {
      type: String,
      default: '页面标题'
    },
    backText: {
      type: String,
      default: '返回'
    },
    showMore: {
      type: Boolean,
      default: true
    },
    showMoreOptions: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleBack() {
      this.$emit('back')
    },
    handleMore() {
      this.$emit('more')
    },
    handleMoreOptions() {
      this.$emit('moreOptions')
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .header-left {
    display: flex;
    align-items: baseline;
    
    .back-text {
      color: #ff6b35;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
  
  .header-center {
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .header-right {
    padding: 10rpx;
    font-size: 28rpx;
    color: #0B1F20;
  }
}
</style> 